<template>
	<view class="setting">
		<base-navbar back-color="#fff" title="店铺设置"></base-navbar>
		<view class="header">
			<c-tabs :list="tabList" :current="currentTab" @change="tabChange" :line-color="themeColor.theme"></c-tabs>
		</view>
		<view class="content">
			<view class="form-card">
				<uni-forms :modelValue="form" label-position="top" label-width="120px">
					<template v-if="currentTab==0">
						<view class="thumbs-card">
							<view class="tips">
								LOGO/门头照
							</view>
						</view>
						<uni-forms-item label="店铺名称" name="name">
							<input placeholder="输入店铺名称" v-model="form.name"></input>
						</uni-forms-item>
						<uni-forms-item label="一级分销比例" name="leader1_money">
							<input placeholder="输入一级分销比例" v-model="form.leader1_money"></input>
						</uni-forms-item>
						<uni-forms-item label="二级分销比例" name="leader2_money">
							<input placeholder="输入二级分销比例" v-model="form.leader2_money"></input>
						</uni-forms-item>
						<uni-forms-item label="打印订单" name="is_open_print">
							<switch :color="themeColor.theme" :checked="form.is_open_print" style="transform:scale(0.7)" />
						</uni-forms-item>
						<uni-forms-item label="自动打印订单类型" name="print_type">
							<checkbox-group>
								<checkbox value="print_order_type" :color="themeColor.theme" style="transform:scale(0.7)"
									v-for="(item,index) in delivery_types" :key="index"
									:checked="form.print_type[index]==index">
									{{item}}
								</checkbox>
							</checkbox-group>
						</uni-forms-item>
						<uni-forms-item label="营业日" name="business_week">
							<checkbox-group>
								<checkbox value="business_week" :color="themeColor.theme" style="transform:scale(0.7)"
									v-for="(item,index) in business_weeks" :key="index"
									:checked="form.business_week[index]==index">
									{{item}}
								</checkbox>
							</checkbox-group>
						</uni-forms-item>
						<uni-forms-item label="营业时间" class="business-hours">
							<view class="business-hours-item">
								<view @click="()=>{business_hours_start_show=true}">
									<input style="pointer-events: none;" disabled placeholder="开始时间"
										v-model="form.business_hours_start"></input>
								</view>
								<picker :params="{hour:true,minute:true,second:true}" mode="time" placeholder="开始时间"
									@confirm="(e)=>{form.business_hours_start=e.hour+':'+e.minute+':'+e.second;business_hours_start_show=false}"
									@cancel="()=>{business_hours_start_show=false}"></picker>
							</view>
							<view class="business-hours-item">
								<text>至</text>
							</view>
							<view class="business-hours-item">
								<view @click="()=>{business_hours_end_show=true}">
									<input style="pointer-events: none;" disabled placeholder="结束时间"
										v-model="form.business_hours_end"></input>
								</view>
								<picker :params="{hour:true,minute:true,second:true}" mode="time" placeholder="结束时间"
									@confirm="(e)=>{form.business_hours_end=e.hour+':'+e.minute+':'+e.second;business_hours_end_show=false}"
									@cancel="()=>{business_hours_end_show=false}"></picker>
							</view>
						</uni-forms-item>
						<uni-forms-item label="联系人" name="contact_name">
							<input placeholder="输入联系人" v-model="form.contact_name"></input>
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="mobile">
							<input placeholder="输入联系电话" v-model="form.mobile"></input>
						</uni-forms-item>
						<uni-forms-item label="标签" name="tags">
							<view style="float:left;">
								<uni-list v-for="(item,index) in form.tags" :key="index">
									<uni-list-item :title="item" :note="item"></uni-list-item>
								</uni-list>
							</view>
						</uni-forms-item>
						<uni-forms-item>
							<input placeholder="输入标签内容" v-model="tag"></input>
							<button type="success" size="mini" @click="tagsAdd">新增</button>
						</uni-forms-item>
						<uni-forms-item label="商家介绍" name="description">
							<input type="textarea" placeholder="商家介绍" v-model="form.description"></input>
						</uni-forms-item>
					</template>
					<template v-if="currentTab==1">
						<uni-forms-item label="省份" v-if="provincePicker.length>0">
							<picker @change="provincePickerChange" :value="provinceIndex" :range="provincePicker">
								<view>{{provinceName}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="城市" v-if="cityPicker.length>0">
							<picker @change="cityPickerChange" :value="cityIndex" :range="cityPicker">
								<view>{{cityName}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="区域" v-if="areaPicker.length>0">
							<picker @change="areaPickerChange" :value="areaIndex" :range="areaPicker">
								<view>{{areaName}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="街道" v-if="townPicker.length>0">
							<picker @change="townPickerChange" :value="townIndex" :range="townPicker">
								<view>{{townName}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="商家位置" name="location">
							<view @click="chooseLocation">
								<input style="pointer-events: none;" disabled placeholder="选择商家位置"
									v-model="form.location"></input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="详细地址" name="address">
							<input type="textarea" placeholder="详细地址" v-model="form.address"></input>
						</uni-forms-item>
					</template>
					<template v-if="currentTab==2">
						<uni-forms-item label="起送金额" name="delivery.delivery_fee">
							<view>
								<input type="number" placeholder="输入起送金额" v-model="form.delivery.delivery_fee"></input>
								<text class="tips">订单金额必须达到指定金额才能下单配送</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="免费配送" name="delivery.free_delivery_fee">
							<view>
								<input type="number" placeholder="输入免费配送金额"
									v-model="form.delivery.free_delivery_fee"></input>
								<text class="tips">订单金额达到指定金额将免除配送费</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="费用公式">
							基础运费+(距离X距离单价)+恶劣天气价格
						</uni-forms-item>
						<uni-forms-item label="每千克费用" name="delivery.weight_fee">
							<view>
								<input type="number" placeholder="输入每千克费用" v-model="form.delivery.weight_fee"></input>
								<text class="tips">订单金额达到指定金额将免除配送费</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="基础配送费" name="delivery.base_fee">
							<view>
								<input type="number" placeholder="输入基础配送费" v-model="form.delivery.base_fee"></input>
								<text class="tips">每单价格(元)</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="基础配送费最远距离" name="delivery.base_distance">
							<view>
								<input type="number" placeholder="输入基础配送费最远距离"
									v-model="form.delivery.base_distance"></input>
								<text class="tips">基础配送费内最远距离(公里/千米)</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="距离单价" name="delivery.per_distance_fee">
							<view>
								<input type="number" placeholder="输入距离单价"
									v-model="form.delivery.per_distance_fee"></input>
								<text class="tips">超出基础配送费用最远距离后,超出的每公里加价(元/公里)</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="最远配送距离" name="delivery.max_distance">
							<view>
								<input type="number" placeholder="输入最远配送距离"
									v-model="form.delivery.max_distance"></input>
								<text class="tips">最远配送距离(公里/千米)</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="加价" name="delivery.add_fee">
							<view>
								<input type="number" placeholder="输入加价金额" v-model="form.delivery.add_fee"></input>
								<text class="tips"> 如:雨雪天气、高温、大风等（元)</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="加价描述" name="delivery.add_fee_note">
							<view>
								<input type="number" placeholder="输入加价描述" v-model="form.delivery.add_fee_note"></input>
								<text class="tips"> 如: 因雨雪天气加价10元</text>
							</view>
						</uni-forms-item>
					</template>
				</uni-forms>
			</view>

			<view class="tool-bar">
				<view class="btn-group">
					<button type="warning" shape="circle" @click="submit('save')">提交保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		tabList: [{
			text: '基本设置',
		}, {
			text: '位置信息',
		}, {
			text: '配送费设置',
		}],
		currentTab: 0,
		form: {
			name: '', //店铺名称
			leader1_money: '', //一级分销比例
			leader2_money: '', //二级分销比例
			is_open_print: false, //打印订单
			print_type: [], //自动打印订单类型
			business_week: [], //营业日
			business_hours_start: '', //开始营业时间
			business_hours_end: '', //结束营业时间
			contact_name: '', //联系人
			mobile: '', //联系电话
			tags: [], //标签
			description: '', //商家介绍
			location: '', //商家位置
			address: '', //详细地址
			delivery: {
				delivery_fee: '', //起送金额
				free_delivery_fee: '', //免费配送
				weight_fee: '', //每千克费用
				base_fee: '', //基础配送费
				base_distance: '', //基础配送费最远距离
				per_distance_fee: '', //距离单价
				max_distance: '', //最远配送距离
				add_fee: '', //加价
				add_fee_note: '', //加价描述
			},
		},
		delivery_types: [],
		business_weeks: [],
		business_hours_start_show: false,
		business_hours_end_show: false,
		tag: '',

		provinces: [],
		provincePicker: [],
		provinceIndex: -1,
		provinceName: '请选择',

		citys: [],
		cityPicker: [],
		cityIndex: -1,
		cityName: '请选择',

		areas: [],
		areaPicker: [],
		areaIndex: -1,
		areaName: '请选择',

		towns: [],
		townPicker: [],
		townIndex: -1,
		townName: '请选择',
	});

	onLoad((opt) => {
		getCitys();
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function getCitys() {
		uni.showLoading({
			title: '加载中'
		});
		request.get('common/getAreaList').then(res => {
			uni.hideLoading();
			console.log('城市列表', res);
		})
		getOptions();
	}

	function getOptions() {
		request.get('storesetting/getOptions').then(res => {
			console.log('选项信息', res);
			state.delivery_types = res.data.delivery_types;
			state.business_weeks = res.data.business_weeks;
		})
		getStoreConfig();
	}

	function getStoreConfig() {
		request.get('storesetting/getStoreConfig').then(res => {
			console.log('商家信息', res);
			state.form = res.data;
		})
	}

	function tagsAdd() {

	}

	function tabChange(e) {
		console.log(e);
		state.currentTab = e.index;
	}

	//
	function provincePickerChange() {

	}

	//
	function cityPickerChange() {

	}

	//
	function areaPickerChange() {

	}

	//
	function townPickerChange() {

	}

	//
	function chooseLocation() {

	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		tabList,
		currentTab,
		form,
		delivery_types,
		business_weeks,
		business_hours_start_show,
		business_hours_end_show,
		tag,
		provinces,
		provincePicker,
		provinceIndex,
		provinceName,
		citys,
		cityPicker,
		cityIndex,
		cityName,
		areas,
		areaPicker,
		areaIndex,
		areaName,
		towns,
		townPicker,
		townIndex,
		townName,
	} = toRefs(state);
</script>

<style lang="scss">
	.setting {
		.header {}

		.content {
			// margin-top: -40rpx;
			padding: $m24 $m24 120rpx;

			.form-card,
			.thumbs-card,
			.rich-card {
				margin-top: $m24;
				padding: $m24;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-12;
			}

			.form-card {
				.tips {
					font-size: $font-24;

					.label {
						color: $u-type-error;
					}
				}
			}

			.uni-forms {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.uni-forms-item {
					flex: 0 0 32%;

					.business-hours {
						display: flex;

						.business-hours-item {
							display: block;
							width: 33%;
							text-align: center;
						}
					}
				}
			}
		}

		.tool-bar {
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: $u-bg-color;
			z-index: 10;

			.btn-group {
				@include f-center;
				width: 100%;
			}
		}
	}
</style>